<template>
	<!-- <view class="uni-container" :style="{'background-image': 'url('+imageURL+')', 'background-repeat': 'no-repeat', 'background-size': '100%'}"> -->
	<view class="uni-container" :style="{'background-color': '#ffffff'}">

		<view class="result">
			<view class="stats">
				<view class="amount display_flex">
					<text>￥</text>
					<text class="number">{{wages.wagesResult.tax}}</text>
				</view>
				<view class="detail display_flex">
					<text>平均每月应缴纳个税</text>
					<text class="detailbtn" @click="handleDetails">明细</text>
				</view>
				<view class="yearlysummary display_flex">
					<view class="uni-flex uni-row">
						<view class="flex-item">
							<view class="amount">
								￥<text class="amount_span">{{wages.wagesResult.afterTaxYearSalary}}</text>
							</view>
							<view class="">
								税后收入(年)
							</view>
						</view>
						<view class="flex-item">
							<view class="amount">
								￥<text class="amount_span">{{wages.wagesResult.yearSecutityDeductions}}</text>
							</view>
							<view class="">
								五险一金(年)
							</view>
						</view>
						<view class="flex-item">
							<view class="amount">
								￥<text class="amount_span">{{wages.wagesResult.yearNeedPayTaxIncome}}</text>
							</view>
							<view class="">
								应纳税额(年)
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="formulatitle">
				工资个人所得税计算公式
			</view>
			<view class="formulatext">
				<view class="">
					<text class="formula">
						应纳税所得额= 年度税前工资收入 - 年度五险一金（个人缴纳部分） - 年度专项附加扣除 - 年度减除费用 - 年度其他扣除
					</text>
					<text class="formula">
						应纳税额= 应纳税所得额 * 税率 - 速算扣除数
					</text>
					
				</view>
			</view>
			<view class="formulatitle">
				工资薪金税率表
			</view>
			<view class="formulatable">
				<table>
					<tr>
						<th>全年应纳所得额</th>
						<th>税率（%）</th>
						<th>速算扣除数</th>
					</tr>
					<tr>
						<td>≤36000</td>
						<td>3</td>
						<td>0</td>
					</tr>
					<tr>
						<td>36000-144000(含)</td>
						<td>10</td>
						<td>2520</td>
					</tr>
					<tr>
						<td>144000-300000(含)</td>
						<td>20</td>
						<td>16920</td>
					</tr>
					<tr>
						<td>300000-420000(含)</td>
						<td>25</td>
						<td>31920</td>
					</tr>
					<tr>
						<td>420000-660000(含)</td>
						<td>30</td>
						<td>52920</td>
					</tr>
					<tr>
						<td>660000-960000(含)</td>
						<td>35</td>
						<td>85920</td>
					</tr>
					<tr>
						<td>&gt;960000</td>
						<td>45</td>
						<td>181920</td>
					</tr>
				</table>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
			}
		},
		computed: {
			...mapState(['wages'])
		},
		methods: {
			handleDetails() {
				uni.navigateTo({
					url: '/pages/wages/resultDetails'
				});
			}
			
		}
	}
</script>

<style>
	
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}
	.result {
	    background-color: #fff
	}
	
	.result .stats {
	    background-color: #3b7de0;
	    background-size: 100%;
	    border-radius: 0 0 1.366667rem 1.366667rem;
	    padding: 2.4884rem .926667rem 1.153333rem .926667rem;
	    color: #fff;
	    font-size: .826667rem
	}
	
	.result .stats .amount {
	    font-size: 1.086667rem;
	    justify-content: center;
	    align-items: baseline;
		text-align: center;
		line-height: 1.7333rem;
		overflow-wrap: break-word;
	}
	
	.result .stats .amount .number {
	    font-size: 2.066667rem;
	    font-weight: bolder
	}
	.result .stats .detail {
	    padding: .386667rem 0 1.146667rem 0;
	    font-size: .790333rem;
	    border-bottom: .026667rem solid hsla(0,0%,100%,.4);
	    justify-content: center;
	    align-items: center;
		text-align: center;
	}
	
	.result .stats .detail .detailbtn {
	    margin-left: .133333rem;
	    padding: .133333rem .266667rem;
	    font-size: .426667rem;
	    background-color: rgba(0,0,0,.2);
	    border-radius: .133333rem;
	    width: auto
	}
	
	.result .stats .yearlysummary {
	    justify-content: space-around;
	    text-align: center;
	    font-size: .82rem
	}
	
	.result .stats .yearlysummary .amount {
	    padding: 1.306667rem 0 0 0;
	    font-size: .926667rem
	}
	
	.result .stats .yearlysummary .amount_span {
	    font-size: 1.24rem;
	    font-weight: bolder
	}
	
	.result .formulatitle {
	    padding: .566667rem .7rem;
	    font-size: .773333rem;
	    color: #010101
	}
	
	.result .formulatext {
	    margin: .366667rem .7rem .833333rem .7rem;
	    padding: .726667rem .86rem;
	    background-color: #fff;
	    border-radius: .433333rem;
	    box-shadow: 0 0 .433333rem .433333rem #f7f7f7;
	    color: #010101;
	    font-size: .82rem
	}
	
	.result .formulatext span {
	    line-height: .833333rem
	}
	
	.result .formulatext .formula {
	    color: #666
	}
	
	.result .formulatable {
	    padding: .433333rem .7rem .753333rem .7rem
	}
	
	.result .formulatable table {
	    width: 100%;
	    text-align: center;
	    color: #000;
	    font-size: .72rem;
		border-collapse: collapse;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: Microsoft Yahei,"\9ED1\4F53";
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		user-select: none;
		line-height: 1;
	}
	
	.result .formulatable table tr:first-child {
	    border: .026667rem solid #c0d4da;
	    border-bottom: none
	}
	
	.result .formulatable table tr {
	    height: 1.6333rem;
	    line-height: 1.6333rem
	}
	
	.result .formulatable table tr th {
	    background-color: #f6f8f9
	}
	
	.result .formulatable table tr td {
	    border: .026667rem solid #c0d4da
	}

</style>
